<template>
  <div class="page">
    <!--1. 匹配管家-->
    <div class="box_4 flex-col">
      <div class="block_1 flex-row justify-between">
        <div class="block_1_t">
          <img class="label_1" src="~@/assets/images/sys_scheme_01.png" />
          <div class="text-group_1">匹配管家类型</div>
        </div>
        <div class="text-wrapper_2 flex-col">
          <span class="text_4">{{ clerkScheme.ktype }}</span>
        </div>
      </div>
      <div class="block_1 flex-row justify-between">
        <div class="block_1_t">
          <img class="label_1" src="~@/assets/images/sys_scheme_02.png" />
          <div class="text-group_1">咨客关键点</div>
        </div>
        <div class="text-wrapper_2 flex-col">
          <span class="text_4">{{ clerkScheme.keyPoint }}</span>
        </div>
      </div>
    </div>
    <!--2. 成交逻辑-->
    <div class="box_11 flex-col">
      <span class="text_17"><span style="width: 80px; margin-bottom: 3px">成交逻辑</span></span>
      <div class="text-wrapper_11 flex-col">
        <span style="display: block">
          {{ clerkScheme.cjlj }}
        </span>
      </div>
      <div class="group_2 flex-row justify-between">
        <div class="image-text_8 flex-row justify-between">
          <img class="label_2" style="margin-bottom: 2px" src="~@/assets/images/sys_scheme_03.png" />
          <span class="text-group_9">成交过几关</span>
        </div>
        <div class="text-wrapper_12 flex-col">
          <span class="text_19">{{ clerkScheme.cjStep }}</span>
        </div>
      </div>
      <div class="group_2 flex-row justify-between">
        <div class="image-text_8 flex-row justify-between">
          <img class="label_2" style="margin-bottom: 2px" src="~@/assets/images/sys_scheme_03.png" />
          <span class="text-group_9">面部设计方向</span>
        </div>
        <div class="text-wrapper_12 flex-col">
          <span class="text_19">{{ clerkScheme.faceDesign }}</span>
        </div>
      </div>
      <div class="group_2 flex-row justify-between">
        <div class="image-text_8 flex-row justify-between">
          <img class="label_2" style="margin-bottom: 2px" src="~@/assets/images/sys_scheme_03.png" />
          <span class="text-group_9">相法允许含量</span>
        </div>
        <div class="text-wrapper_12 flex-col">
          <span class="text_19">{{ clerkScheme.faXiangPercent }}</span>
        </div>
      </div>
      <div class="group_2 flex-row justify-between">
        <div class="image-text_8 flex-row justify-between">
          <img class="label_2" style="margin-bottom: 2px" src="~@/assets/images/sys_scheme_03.png" />
          <span class="text-group_9">成交周期</span>
        </div>
        <div class="text-wrapper_12 flex-col"></div>
      </div>
      <div class="group_2 flex-row justify-between" style="height: auto">
        <div class="text-wrapper_13 flex-col">
          <span class="text_18">{{ clerkScheme.transactionCycle }}</span>
        </div>
      </div>
      <div class="group_2 flex-row justify-between">
        <div class="image-text_8 flex-row justify-between">
          <img class="label_2" style="margin-bottom: 2px" src="~@/assets/images/sys_scheme_03.png" />
          <span class="text-group_9">成交额大小</span>
        </div>
        <div class="text-wrapper_12 flex-col"></div>
      </div>
      <div class="group_2 flex-row justify-between" style="height: auto">
        <div class="text-wrapper_13 flex-col">
          <span class="text_18">{{ clerkScheme.transactionLimit }}</span>
        </div>
      </div>
      <div class="group_2 flex-row justify-between">
        <div class="image-text_8 flex-row justify-between">
          <img class="label_2" style="margin-bottom: 2px" src="~@/assets/images/sys_scheme_03.png" />
          <span class="text-group_9">裂变难度</span>
        </div>
        <div class="text-wrapper_12 flex-col">
          <span class="text_19">{{ clerkScheme.fissionDifficulty }}</span>
        </div>
      </div>
    </div>
    <!--3. 破冰心法-->
    <div class="box_5 flex-col">
      <span class="text_6"><span style="width: 80px; margin-bottom: 3px">破冰心法</span></span>
      <div class="text-wrapper_11 flex-col">
        <span style="display: block; color: rgba(29, 118, 243, 1)">
          {{ clerkScheme.pbxf }}
        </span>
      </div>
      <div class="group_2 flex-row justify-between">
        <div class="image-text_8 flex-row justify-between">
          <img class="label_2" style="margin-bottom: 2px" src="~@/assets/images/sys_scheme_04.png" />
          <span class="text-group_9" style="color: rgba(29, 118, 243, 1)">破冰执行策略</span>
        </div>
        <div class="text-wrapper_12 flex-col"></div>
      </div>
      <div class="group_2 flex-row justify-between" style="height: auto">
        <div class="text-wrapper_5 flex-col">
          <span class="text_7">{{ clerkScheme.jlxr }}</span>
        </div>
      </div>
      <div class="group_2 flex-row justify-between">
        <div class="image-text_8 flex-row justify-between">
          <img class="label_2" style="margin-bottom: 2px" src="~@/assets/images/sys_scheme_04.png" />
          <span class="text-group_9" style="color: rgba(29, 118, 243, 1)">破冰话术参考</span>
        </div>
        <div class="text-wrapper_12 flex-col"></div>
      </div>
      <div class="group_2 flex-row justify-between" style="height: auto">
        <div class="text-wrapper_5 flex-col">
          <span class="text_7">{{ clerkScheme.pbhsck }}</span>
        </div>
      </div>
    </div>
    <!--4. 信任执行策略-->
    <div class="box_6 flex-col">
      <span class="text_10">信任执行策略</span>
      <div class="text-wrapper_7 flex-col">
        <span class="text_11">{{ clerkScheme.cjcl }}</span>
      </div>
      <div class="box_7 flex-row justify-between">
        <div class="image-text_5 flex-row justify-between">
          <img class="label_2" style="margin-left: -2px" src="~@/assets/images/sys_scheme_05.png" />
          <span class="text-group_3" style="color: #766aff">人道话题所有关注点</span>
        </div>
        <div class="text-wrapper_12 flex-col">
          <span class="text_12">{{ clerkScheme.rdwtAll }}</span>
        </div>
      </div>
      <div class="box_8 flex-row">
        <div class="text-group_6 flex-col justify-between">
          <span class="text_13">熠学客情提示：</span>
          <span class="text_14">
            {{ clerkScheme.kqfa }}
          </span>
        </div>
      </div>
    </div>
    <!--5. 扬长避短-->
    <div class="box_10 flex-col">
      <div class="image-text_5 flex-row justify-between">
        <img class="label_2" style="margin-left: -3px" src="~@/assets/images/sys_scheme_06.png" />
        <span class="text-group_7">扬长方案</span>
      </div>
      <div class="text-wrapper_9 flex-col">
        <span class="text_15">{{ clerkScheme.rdjyYc }}</span>
      </div>
      <div class="image-text_5 flex-row justify-between">
        <img class="label_2" style="margin-left: -3px" src="~@/assets/images/sys_scheme_07.png" />
        <span class="text-group_8">避短方案</span>
      </div>
      <div class="text-wrapper_10 flex-col">
        <span class="text_16">{{ clerkScheme.rdjyBd }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getBaseClerkScheme } from '@/api/ym';
import Notify from 'vant/lib/notify';
import 'vant/lib/notify/style';

export default {
  name: 'KeeperConsumerScheme',
  components: {
    [Notify.name]: Notify,
  },
  props: {
    cid: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      clerkId: this.cid,
      clerkScheme: {}, // 后端返回的系统方案对象
    };
  },
  mounted() {
    this.queryClerkScheme();
  },
  methods: {
    handleClose() {
      this.$emit('closed', 'closed');
    },
    queryClerkScheme() {
      getBaseClerkScheme(this.clerkId)
        .then(res => {
          this.clerkScheme = res.data.data;
        })
        .catch(e => {
          console.log('getBaseClerkScheme', e);
        })
        .finally(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
$title-width: 3.36667rem;
$title-height: 0.57333rem;
$title-line-height: 0.67333rem;
$title-font-size: 0.39333rem;
$title-label-size: 0.47333rem;
$title-inline-font-size: 0.33333rem;
$title-nexline-font-size: 0.30333rem;

.page {
  width: 100%;
  height: 2648px;
  background: none;
}

.box_2 {
  width: 52px;
  height: 20px;
  margin: 24px 0 0 322px;
}

.thumbnail_1 {
  width: 20px;
  height: 20px;
}

.text_1 {
  width: 28px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(118, 106, 255, 1);
  font-size: 14px;
  letter-spacing: -0.30000001192092896px;
  font-family: Noto Sans SC-Regular;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 14px;
}

.box_3 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  width: 366px;
  height: 48px;
  margin: 12px 0 0 12px;
}

.text-wrapper_1 {
  background-color: rgba(236, 235, 255, 1);
  border-radius: 6px;
  height: 36px;
  width: 173px;
  margin: 6px 0 0 6px;
}

.text_2 {
  width: 56px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(118, 106, 255, 1);
  font-size: 14px;
  font-family: Noto Sans SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  margin: 8px 0 0 59px;
}

.text_3 {
  width: 56px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 14px;
  font-family: Noto Sans SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  margin: 14px 60px 0 71px;
}

.box_4 {
  width: 100%;
  height: 95px;
  margin-top: 25px;
  padding: 0 10px 0 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
}

.block_1 {
  width: 100%;
  height: $title-height;
  display: flex;
  align-items: center;
}

.block_1_t {
  display: flex;
  align-items: center;
  width: $title-width;
  height: $title-height;
}

.label_1 {
  width: $title-label-size;
  height: $title-label-size;
  margin: 7px 0 7px 10px;
}

.label_2 {
  width: $title-label-size;
  height: $title-label-size;
  margin: auto;
}

.text-group_1 {
  width: 90%;
  height: $title-height;
  /*文字垂直居中 height = line-height */
  line-height: $title-line-height;
  margin: 0 0 0 5px;
  font-family: Noto Sans SC, Noto Sans SC;
  font-weight: bold;
  font-size: $title-font-size;
  text-align: left;
  font-style: normal;
  text-transform: none;
  color: transparent;
  background: linear-gradient(0deg, #8b84fd 0%, #6082ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.text-wrapper_2 {
  width: 70%;
  height: $title-height;
  /*文字垂直居中 height = line-height */
  line-height: $title-line-height;
  /*禁止继承父元素的 flex */
  display: block;
  margin-left: 5px;
}

.text_4 {
  margin: 0 0 0 5px;
  padding: 0 5px 0 5px;
  font-family: Noto Sans SC, Noto Sans SC;
  font-weight: 500;
  font-size: $title-inline-font-size;
  text-align: left;
  font-style: normal;
  overflow-wrap: break-word;
  color: rgba(118, 106, 255, 1);
  white-space: nowrap;
  background-color: rgba(245, 245, 255, 1);
  border-radius: 4px;
}

.box_5 {
  width: 100%;
  min-height: 700px;
  margin-top: 25px;
  padding: 0 18px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  vertical-align: top;
  background: linear-gradient(180deg, #e5f0ff 0%, #ffffff 100%);
  background-size: 100% 100%;
  border-radius: 8px 8px 8px 8px;
}

.text_6 {
  width: 108px;
  height: $title-height;
  display: inline-block;
  margin: 0 auto;
  overflow-wrap: break-word;
  color: rgba(29, 118, 243, 1);
  font-size: $title-font-size;
  font-family: Noto Sans SC-Bold;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: $title-line-height;
  margin: 18px 0 0 0;
  background: linear-gradient(90deg, #1d76f3 0%, rgba(29, 118, 243, 0) 100%);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 100% 25%;
}

.text_7 {
  width: 326px;
  height: $title-height;
  overflow-wrap: break-word;
  color: rgba(29, 118, 243, 1);
  font-size: $title-nexline-font-size;
  font-family: Noto Sans SC-Regular;
  font-weight: normal;
  text-align: left;
  margin: 12px 0 0 12px;
}

.label_3 {
  width: 24px;
  height: 24px;
  display: inline-block;
  background: url('~@/assets/images/sys_scheme_04.png');
  background-size: cover;
}

.text-group_3 {
  width: 110px;
  display: inline-block;
  height: $title-height;
  line-height: $title-line-height;
  overflow-wrap: break-word;
  color: rgba(29, 118, 243, 1);
  font-size: $title-font-size;
  font-family: Noto Sans SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  margin-top: 0;
  margin-left: 6px;
}

.text-wrapper_5 {
  border-radius: 8px;
  background-color: #f5f9ff;
  border-radius: 8px;
  width: 100%;
  line-height: 1.5;
  margin: 0 0 0 0;
  padding: 15px 12px 15px 12px;
  display: block;
  overflow-wrap: break-word;
  font-size: 19px;
  font-family: Noto Sans SC-Regular;
  font-weight: normal;
  text-align: left;
}

.box_6 {
  width: 100%;
  min-height: 350px;
  margin-top: 20px;
  padding: 0 18px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  vertical-align: top;
  background: linear-gradient(180deg, #e8e5ff 0%, #ffffff 100%);
  background-size: 100% 100%;
  justify-content: flex-center;
  border-radius: 8px 8px 8px 8px;
}

.text_10 {
  width: 148px;
  height: $title-height;
  display: inline-block;
  margin: 0 auto;
  overflow-wrap: break-word;
  color: #766aff;
  font-size: $title-font-size;
  font-family: Noto Sans SC-Bold;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: $title-line-height;
  margin: 18px 0 0 0;
  background: linear-gradient(90deg, #766aff 0%, rgba(118, 106, 255, 0) 100%);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 100% 25%;
}

.text-wrapper_7 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  width: 100%;
  margin: 15px 0 0 0;
  padding: 15px 12px 15px 12px;
}

.text_11 {
  width: 100%;
  overflow-wrap: break-word;
  color: rgba(118, 106, 255, 1);
  font-size: $title-nexline-font-size;
  font-family: Noto Sans SC-Regular;
  font-weight: normal;
  text-align: left;
  margin: 0 0 0 0;
}

.box_7 {
  width: 100%;
  margin: 16px 0 0 0;
}

.image-text_5 {
  width: 124px;
  height: $title-height;
  margin: 16px 0 0 0px;
  justify-self: start;
  place-self: flex-start;
}

.label_5 {
  width: 24px;
  height: 24px;
  display: inline-block;
  background: url('~@/assets/images/sys_scheme_05.png');
  background-size: cover;
}

.text_12 {
  margin: 0 0 0 120px;
  padding: 2px 8px 2px 8px;
  font-family: Noto Sans SC, Noto Sans SC;
  font-weight: 500;
  font-size: $title-inline-font-size;
  text-align: left;
  font-style: normal;
  overflow-wrap: break-word;
  color: #766aff;
  white-space: nowrap;
  background-color: #f0f0ff;
  border-radius: 4px;
  vertical-align: -14px;
}

.box_8 {
  background-color: rgba(245, 245, 245, 1);
  border-radius: 8px;
  width: 100%;
  margin: 16px 0 12px 12px;
}

.text-group_6 {
  width: 100%;
  height: auto;
  margin: 0 0 0 0;
}

.text_13 {
  width: $title-width;
  height: $title-height;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: $title-inline-font-size;
  font-family: Noto Sans SC-Medium;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
}

.text_14 {
  width: 100%;
  height: 60px;
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: $title-nexline-font-size;
  font-family: Noto Sans SC-Regular;
  font-weight: normal;
  line-height: 1.5;
  text-align: left;
  margin-top: 8px;
}

.box_10 {
  width: 100%;
  min-height: 400px;
  margin-top: 20px;
  display: flex;
  place-items: center;
  padding: 0 18px 0 18px;
  background: #ffffff;
  background-size: 100% 100%;
  justify-content: flex-center;
  border-radius: 8px 8px 8px 8px;
}

.label_6 {
  width: 24px;
  height: 24px;
  display: inline-block;
  background: url('~@/assets/images/sys_scheme_06.png');
  background-size: cover;
}

.text-group_7 {
  width: 110px;
  height: $title-height;
  line-height: $title-line-height;
  overflow-wrap: break-word;
  color: #1d76f3;
  font-size: $title-font-size;
  font-family: Noto Sans SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  margin-top: 0;
  margin-left: 6px;
}

.text-wrapper_9 {
  background-color: #f0f6ff;
  border-radius: 8px;
  width: 100%;
  margin: 15px 0 0 0;
  padding: 15px 12px 15px 12px;
}

.text_15 {
  width: 100%;
  overflow-wrap: break-word;
  color: #1d76f3;
  font-size: $title-nexline-font-size;
  font-family: Noto Sans SC-Regular;
  font-weight: normal;
  text-align: left;
  margin: 0 0 0 0;
}

.label_7 {
  width: 24px;
  height: 24px;
  display: inline-block;
  background: url('~@/assets/images/sys_scheme_07.png');
  background-size: cover;
}

.text-group_8 {
  width: 110px;
  height: $title-height;
  line-height: $title-line-height;
  overflow-wrap: break-word;
  color: #ea5555;
  font-size: $title-font-size;
  font-family: Noto Sans SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  margin-top: 0;
  margin-left: 6px;
}

.text-wrapper_10 {
  background-color: #fff0f0;
  border-radius: 8px;
  width: 100%;
  margin: 15px 0 0 0;
  padding: 15px 12px 15px 12px;
}

.text_16 {
  width: 100%;
  overflow-wrap: break-word;
  color: #ea5555;
  font-size: $title-nexline-font-size;
  font-family: Noto Sans SC-Regular;
  font-weight: normal;
  text-align: left;
  margin: 0 0 0 0;
}

.box_11 {
  width: 100%;
  min-height: 800px;
  margin-top: 25px;
  padding: 0 18px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 23px;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  vertical-align: top;
  background: linear-gradient(180deg, #fff0e5 0%, #ffffff 100%);
  background-size: 100% 100%;
  border-radius: 8px 8px 8px 8px;
}

.text_17 {
  width: 108px;
  height: $title-height;
  display: block;
  overflow-wrap: break-word;
  color: rgba(204, 92, 0, 1);
  font-size: $title-font-size;
  font-family: Noto Sans SC-Bold;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: $title-line-height;
  margin: 14px 0 0 0;
  background: linear-gradient(90deg, #cc5c00 0%, rgba(204, 92, 0, 0) 100%);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 100% 25%;
}

.text-wrapper_11 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  width: 100%;
  line-height: 1.5;
  margin: 14px 0 0 0;
  padding: 15px 12px 15px 12px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(204, 92, 0, 1);
  font-size: $title-nexline-font-size;
  font-family: Noto Sans SC-Regular;
  font-weight: normal;
  text-align: left;
}

.group_2 {
  width: 100%;
  height: $title-height;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.image-text_8 {
  display: block;
  align-items: left;
  justify-self: flex-start;
  width: $title-width;
  height: $title-height;
  margin-top: 10px;
}

.text-wrapper_12 {
  width: 70%;
  height: $title-height;
  /*文字垂直居中 height = line-height */
  line-height: $title-line-height;
  /*禁止继承父元素的 flex */
  display: block;
}

.text-wrapper_13 {
  width: 100%;
  height: auto;
  /*文字垂直居中 height = line-height */
  line-height: $title-line-height;
  /*禁止继承父元素的 flex */
  display: block;
  background: #faf0e9;
  border-radius: 4px 4px 4px 4px;
  border-radius: 4px;
}

.text-group_9 {
  width: 50%;
  height: $title-height;
  line-height: $title-line-height;
  font-family: Noto Sans SC, Noto Sans SC;
  font-weight: bold;
  font-size: $title-font-size;
  color: #cc5c00;
  line-height: 0px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  vertical-align: 10px;
  margin-left: 6px;
}

.text_18 {
  margin: 0 0 0 5px;
  padding: 10px 5px 5px 5px;
  font-family: Noto Sans SC, Noto Sans SC;
  font-weight: 500;
  font-size: $title-inline-font-size;
  text-align: left;
  font-style: normal;
  overflow-wrap: break-word;
  color: rgba(204, 92, 0, 1);
  white-space: nowrap;
}

.text_19 {
  margin: 0 0 0 5px;
  padding: 2px 8px 2px 8px;
  font-family: Noto Sans SC, Noto Sans SC;
  font-weight: 500;
  font-size: $title-inline-font-size;
  text-align: left;
  font-style: normal;
  overflow-wrap: break-word;
  color: rgba(204, 92, 0, 1);
  white-space: nowrap;
  background-color: #ffedde;
  border-radius: 4px;
}
</style>
